<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>gridb布局容器-display 属性</title>
    <style>
        .gbox {
            /* 指定一个容器采用网格布局。 */
            display: grid;

            /* 默认情况下，容器元素都是块级元素，但也可以设成行内元素。 */
            /* display: inline-grid; */

            grid-template-columns: 100px 100px 100px;
            /* grid-template-columns: repeat(auto-fill, 100px); */
            /* 上面代码表示每列宽度100px，然后自动填充，直到容器不能放置更多的列。 */

            grid-template-rows: 100px 100px 100px;
            border: 2px solid #ccc;

        }

        .gitem:nth-child(1) {
            background-color: aqua;
        }

        .gitem:nth-child(2) {
            background-color: rgb(57, 117, 80);
        }

        .gitem:nth-child(3) {
            background-color: rgb(142, 85, 50);
        }

        .gitem:nth-child(4) {
            background-color: rgb(225, 141, 15);
        }

        .gitem:nth-child(5) {
            background-color: rgb(139, 171, 42);
        }

        .gitem:nth-child(6) {
            background-color: rgb(85, 161, 66);
        }

        .gitem:nth-child(7) {
            background-color: rgb(54, 121, 111);
        }

        .gitem:nth-child(8) {
            background-color: rgb(45, 76, 160);
        }

        .gitem:nth-child(9) {
            background-color: rgb(157, 51, 159);
        }
    </style>
</head>

<body>
    <p>采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。</p>
    <p>display: grid指定一个容器采用网格布局。</p>
    <p>设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。</p>
    <p>容器指定了网格布局以后，接着就要划分行和列。</p>
    <p>grid-template-columns属性定义每一列的列宽</p>
    <p>grid-template-rows 属性定义每一行的行高。</p>
    <p>auto-fill 关键字</p>
    <p>有时，单元格的大小是固定的，但是容器的大小不确定。如果希望每一行（或每一列）容纳尽可能多的单元格，这时可以使用auto-fill关键字表示自动填充。 </p>

    <p>auto-fit关键字</p>
    <p>只有当容器足够宽，可以在一行容纳所有单元格，并且单元格宽度不固定的时候，
        才会有行为差异：auto-fill会用空格子填满剩余宽度，auto-fit则会尽量扩大单元格的宽度。</p>
    foo
    <div class="gbox">
        <div class="gitem">1</div>
        <div class="gitem">2</div>
        <div class="gitem">3</div>
        <div class="gitem">4</div>
        <div class="gitem">5</div>
        <div class="gitem">6</div>
        <div class="gitem">7</div>
        <div class="gitem">8</div>
        <div class="gitem">9</div>
    </div>
    bar
</body>

</html>